<template>
  <el-dialog title="用户详情" top="10vh" :visible.sync="isShow" width="80%">
    <el-descriptions
      v-if="infoData"
      title=""
      :column="3"
      border
    >
      <el-descriptions-item>
        <template slot="label">姓名</template>
        <span>
          {{ infoData.name }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          年龄
        </template>
        <span>
          {{ infoData.age }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          性别
        </template>
        <span>
          {{ infoData.gender }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        <div>
          <div>{{ infoData.mobile }}</div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系状态
        </template>
        {{ getPlanText(infoData.plan) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">申请时间</template>
        {{ infoData.createtime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">身份证</template>
        <span>
          {{ infoData.identity }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-office-building" />
          地区
        </template>
        <span>
          {{
            infoData.province +
              " " +
              infoData.city +
              " " +
              infoData.district
          }}
        </span>
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeName" style="margin-top: 30px;">
      <el-tab-pane label="基本信息" name="first">
        <el-descriptions
          v-if="infoData"
          title=""
          :column="3"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              资金需求
            </template>
            <span>{{ infoData.loan_money }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 职业</template>
            <span>{{ infoData.work }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 信用状况</template>
            <span>{{ getCreditStatusText(infoData.credit_status) }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              芝麻分
            </template>
            <span>{{ infoData.sesame_score }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              花呗额度
            </template>
            <span>{{ infoData.huabei_quota }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              白条额度
            </template>
            <span>{{ infoData.baitiao_quota }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          v-if="infoData"
          style="margin-top: 20px;"
          title=""
          :column="3"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              车产
            </template>
            <span>{{ infoData.car }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              房产
            </template>
            <span>{{ infoData.house }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              保单
            </template>
            <span>{{ infoData.insurance }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              社保
            </template>
            <span>{{ infoData.social_security }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 公积金</template>
            <span>{{ infoData.accumulation_fund }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 企业主</template>
            <span>{{ infoData.business_owner }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane v-if="infoData.clue_behavior_report_detail" label="全景雷达" name="second">
        <div class="content-title">使用情况</div>
        <el-descriptions
          v-if="infoData"
          title=""
          :column="3"
          border
        >
          <el-descriptions-item>
            <template slot="label">贷款行为分</template>
            <span>{{ infoData.clue_behavior_report_detail.loan_behavior_score }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 贷款信用时长</template>
            <span>{{ infoData.clue_behavior_report_detail.credit_loan_duration }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 第一次履约距今天数</template>
            <span>{{ infoData.clue_behavior_report_detail.last_performance_days }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 已结清笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.loan_settled_orders }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 正常还款占总贷款比例</template>
            <span>{{ infoData.clue_behavior_report_detail.normal_repayment_ratio }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 最近放款时间</template>
            <span>{{ infoData.clue_behavior_report_detail.last_loan_disbursement_time }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="content-title">逾期情况</div>
        <el-descriptions
          v-if="infoData"
          title=""
          :column="3"
          border
        >
          <el-descriptions-item>
            <template slot="label">近6月M0+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m0_6m }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">近12月M0+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m0_12m }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">近24月M0+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m0_24m }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">近6月M1+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m1_6m }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">近12月M1+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m1_12m }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">近24月M1+逾期贷款笔数</template>
            <span>{{ infoData.clue_behavior_report_detail.overdue_loan_count_m1_24m }}</span>
          </el-descriptions-item>
        </el-descriptions>

        <div class="content-title">逾期情况</div>
        <el-table
          :data="dataOneList"
          :border="true"
          size="mini"
        >
          <el-table-column
            v-for="item in columnOne"
            :key="item.dataIndex"
            :prop="item.dataIndex"
            align="center"
            :label="item.title"
          />
        </el-table>
        <div class="content-title">近12个月贷款行为</div>
        <el-table
          :data="dataTwoList"
          :border="true"
          size="mini"
        >
          <el-table-column
            v-for="item in columnTwo"
            :key="item.dataIndex"
            :prop="item.dataIndex"
            align="center"
            :label="item.title"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
import { getStorageSync } from '@/utils/storageUtils.js'
import { apiClueDetails } from '@/api/apiCommon'
import { processDatalistItem } from '@/utils/appUtil'
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false,
      activeName: 'first',
      infoData: {},

      dataOneList: [],
      dataTwoList: [],
      columnOne: [
        {
          title: '贷款金额',
          dataIndex: 'loansNum'
        },
        {
          title: '1K以下',
          dataIndex: 'loan_amount_1k_or_below_12_months'
        },
        {
          title: '1K至3K',
          dataIndex: 'loan_amount_1k_3k_12_months'
        },
        {
          title: '3K至10K',
          dataIndex: 'loan_amount_3k_10k_12_months'
        }
      ],
      columnTwo: [
        {
          title: '行为时间',
          dataIndex: 'behavior_time'
        },
        {
          title: '贷款笔数',
          dataIndex: 'loan_count_month'
        },
        {
          title: '贷款金额',
          dataIndex: 'loan_amount_month'
        },
        {
          title: '贷款机构',
          dataIndex: 'loan_org_count_month'
        },
        {
          title: '失败扣款笔数',
          dataIndex: 'failed_deduction_count'
        },
        {
          title: '履约贷款总金额',
          dataIndex: 'loan_performance_amount'
        },
        {
          title: '履约贷款次数',
          dataIndex: 'loan_performance_count'
        }
      ]
    }
  },

  created() {

  },
  methods: {
    onOpenView(data) {
      const _this = this
      _this.isShow = true
      // _this.infoData = data
      if (data?.c_id) {
        apiClueDetails({ id: data.c_id }).then((res) => {
          _this.infoData = processDatalistItem(res.data.details)
          // console.log('Child method called---', _this.infoData)

          _this.dataOneList = [{
            loansNum: '贷款笔数',
            loan_amount_1k_3k_12_months: _this.infoData.clue_behavior_report_detail.loan_amount_1k_3k_12_months,
            loan_amount_1k_or_below_12_months: _this.infoData.clue_behavior_report_detail.loan_amount_1k_or_below_12_months,
            loan_amount_3k_10k_12_months: _this.infoData.clue_behavior_report_detail.loan_amount_3k_10k_12_months
          }]
          _this.dataTwoList = [
            {
              behavior_time: '1个月',
              loan_count_month: _this.infoData.clue_behavior_report_detail.loan_count_1_month,
              loan_amount_month: _this.infoData.clue_behavior_report_detail.loan_amount_1_month,
              loan_org_count_month: _this.infoData.clue_behavior_report_detail.loan_org_count_1_month,
              failed_deduction_count: _this.infoData.clue_behavior_report_detail.failed_deduction_count_1m,
              loan_performance_amount: _this.infoData.clue_behavior_report_detail.loan_performance_amount_1m,
              loan_performance_count: _this.infoData.clue_behavior_report_detail.loan_performance_count_1m
            },
            {
              behavior_time: '3个月',
              loan_count_month: _this.infoData.clue_behavior_report_detail.loan_count_3_months,
              loan_amount_month: _this.infoData.clue_behavior_report_detail.loan_amount_3_months,
              loan_org_count_month: _this.infoData.clue_behavior_report_detail.loan_org_count_3_months,
              failed_deduction_count: _this.infoData.clue_behavior_report_detail.failed_deduction_count_3m,
              loan_performance_amount: _this.infoData.clue_behavior_report_detail.loan_performance_amount_3m,
              loan_performance_count: _this.infoData.clue_behavior_report_detail.loan_performance_count_3m
            },
            {
              behavior_time: '6个月',
              loan_count_month: _this.infoData.clue_behavior_report_detail.loan_count_6_months,
              loan_amount_month: _this.infoData.clue_behavior_report_detail.loan_amount_6_months,
              loan_org_count_month: _this.infoData.clue_behavior_report_detail.loan_org_count_6_months,
              failed_deduction_count: _this.infoData.clue_behavior_report_detail.failed_deduction_count_6m,
              loan_performance_amount: _this.infoData.clue_behavior_report_detail.loan_performance_amount_6m,
              loan_performance_count: _this.infoData.clue_behavior_report_detail.loan_performance_count_6m
            },
            {
              behavior_time: '12个月',
              loan_count_month: _this.infoData.clue_behavior_report_detail.loan_count_12_months,
              loan_amount_month: _this.infoData.clue_behavior_report_detail.loan_amount_12_months,
              loan_org_count_month: _this.infoData.clue_behavior_report_detail.loan_org_count_12_months,
              failed_deduction_count: _this.infoData.clue_behavior_report_detail.failed_deduction_count_12m,
              loan_performance_amount: _this.infoData.clue_behavior_report_detail.loan_performance_amount_12m,
              loan_performance_count: _this.infoData.clue_behavior_report_detail.loan_performance_count_12m
            },
            {
              behavior_time: '24个月', // / 行为时间
              loan_count_month: _this.infoData.clue_behavior_report_detail.loan_count_24_months, // 贷款笔数
              loan_amount_month: _this.infoData.clue_behavior_report_detail.loan_amount_24_months, // 贷款总额
              loan_org_count_month: _this.infoData.clue_behavior_report_detail.loan_org_count_24_months, // 贷款机构数
              failed_deduction_count: _this.infoData.clue_behavior_report_detail.failed_deduction_count_24m, // /失败扣款笔数
              loan_performance_amount: _this.infoData.clue_behavior_report_detail.loan_performance_amount_24m, // /履约贷款总金额
              loan_performance_count: _this.infoData.clue_behavior_report_detail.loan_performance_count_24m // / 履约贷款次数
            }
          ]
        })
      }
    },
    getPlanText(str) {
      const commonOptionData = getStorageSync('config_current', false)
      const obj = commonOptionData.clue.product_clue_plan || {}
      return obj[str] || ''
    },
    getCreditStatusText(str) {
      const commonOptionData = getStorageSync('config_current', false)
      const objArr = commonOptionData.clue.credit_status_v2 || []
      const obj = {}
      objArr.forEach((item, index) => {
        obj[item.value] = item.label
      })
      return obj[str] || ''
    }
  }
}
</script>

<style scoped lang="scss">
.content-title{
  margin: 20px 0;
  font-weight: bold;
}
</style>
